/* eslint-disable no-unused-vars */
import { ChangeEvent, useState } from 'react'
import {message} from 'antd'
import { observer } from "mobx-react-lite";
import request from 'service/fetch'
import { useStore } from 'store/index'
import CountDown from '../CountDown'
import styles from "./index.module.scss";

interface IProps{
    isShow: boolean;
    onClose:Function
}

const Login = (props: IProps) =>{
  // 获取父组件传值 
  const {isShow=false,onClose} = props
  // 设置状态   
  // eslint-disable-next-line no-unused-vars
  const [isShowVerifyCode,setIsShowVerifyCode] = useState(false)
  // eslint-disable-next-line no-unused-vars
  const [form ,setForm] = useState({
    phone:'',
    verify:''
})

const store = useStore()

// 关闭弹框
const handleClose = () =>{
    onClose && onClose()
}
// 获取验证码
const handleGetVerifyCode =()=>{
    if(!form?.phone){
        message.warning('请输入手机号')
        return
    }
    request.post('/api/user/sendVerifyCode',{ to: form?.phone, templateId: 1 }).then((res:any)=>{
        if(res?.code === 0){
            setIsShowVerifyCode(true)
        }else{
            message.error(res?.msg || '未知错误')
        }
    })
}
// 倒计时结束   
const handleCountDownEnd =()=>{
    setIsShowVerifyCode(false)
}
// 短信登录
const handleLogin =()=>{
    request.post('/api/user/login', {...form,identity_type: 'phone'}).then((res:any)=>{
        if(res?.code === 0){
            store.user.setUserInfo(res?.data)
            handleClose()
        }else{
            message.error(res?.msg || '未知错误')
        }
    })
}
// 第三方登录
const handleOAuthGithub =()=>{}
// 表单数据改变
const handleFormChange = (e:ChangeEvent<HTMLInputElement>)=>{
    // eslint-disable-next-line no-unsafe-optional-chaining
    const {name,value} = e?.target
    setForm({
        ...form,
        [name]:value
    })
}

return isShow ? <div className={styles.loginArea}>
                    <div className={styles.loginBox}>
                        <div className={styles.loginTitle}>
                            <div>手机号登录</div>
                            <div className={styles.close} onClick={handleClose}>x</div>
                        </div>
                        <input name="phone" type="text" placeholder="请输入手机号" onChange={handleFormChange} value={form.phone} />
                        <div className={styles.verifyCodeArea}>
                            <input name="verify" type="text" placeholder="请输入验证码" onChange={handleFormChange} value={form.verify} />
                            <span className={styles.verifyCode} onClick={handleGetVerifyCode}>
                                {isShowVerifyCode ? <CountDown time={10} onEnd={handleCountDownEnd}/> : '获取验证码'}
                            </span>
                        </div>
                        <div className={styles.LoginBtn} onClick={handleLogin}>登录</div>
                        <div className={styles.otherLogin} onClick={handleOAuthGithub}> 使用 Github 登录</div>
                        <div className="styles.loginprivacy">
                            注册登录即表示同意
                            <a href="https://www.imooc.com/help/detail/222" target="_blank" rel="noreferrer">隐私政策</a>
                        </div>
                    </div>
                </div> : null;
}

export default observer(Login)